To make good looking Vue apps, we need to style our components. To make our lives easier, we can use components with styles built-in.
In this article, we’ll look at how to add images that only load when we see them. We also look at how to add input groups.
Lazy Loaded Images
Lazy loading images is more efficient since we don’t have to load all the images upfront.
To do that, we can use the b-image-lazy component.
For instance, we can write:
<template>
<div id="app">
<b-img-lazy src="http://placekitten.com/200/200" alt="kitten"></b-img-lazy>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Now our app will only load the image when it’s shown on the screen.
Input Groups
We can create input groups, which lets us group inputs with other components together.
To add an input group, we use the b-input-group component.
For instance, we can write:
<template>
<div id="app">
<b-input-group size="lg" prepend="$" append=".00">
<b-form-input></b-form-input>
</b-input-group>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We change the size of the group to be large with size="lg" .
prepend lets us add something to the left the input.
append lets us add something to the right of the input.
So we should see the dollar sign on the left and .00 on the right. To customize the input group more, we can put code into slots.
For example, we can write:
<template>
<div id="app">
<b-input-group>
<template v-slot:append>
<b-input-group-text>
<strong class="text-success">!</strong>
</b-input-group-text>
</template>
<b-form-input></b-form-input>
</b-input-group>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Then we can add an exclamation mark with that’s green on the right.
Sub-Components
We can add subcomponents into the b-input-group-prepend and b-input-group-append components to add anything we want to the right.
For example, we can write:
<template>
<div id="app">
<b-input-group>
<b-input-group-prepend>
<b-button variant="primary">left button</b-button>
</b-input-group-prepend>
<b-form-input type="text"></b-form-input>
<b-input-group-append>
<b-button variant="outline-secondary">right button</b-button>
</b-input-group-append>
</b-input-group>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We have the b-input-group-prepend and b-input-group-append components inside the b-input-group component.
This lets us add things that we can’t add with the prepend and append props.
In the example above, we added buttons inside each component.
Support Form Control Inside Input Groups
We can add the following components inside the b-input-group component:
<b-form-input><b-form-textarea><b-form-select><b-form-file><b-form-rating><b-form-tags><b-form-spinbutton><b-form-datepicker><b-form-timepicker>
Check and Radio Buttons
We can add checkboxes and radio buttons inside the b-input-group-prepend and b-input-group-append components.
For example, we can write:
<template>
<div id="app">
<b-input-group>
<b-input-group-prepend is-text>
<input type="checkbox">
</b-input-group-prepend>
<b-form-input></b-form-input>
</b-input-group>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We nest a checkbox inside the b-input-geoup-prepend component.
is-text applies the proper content for textual content.
We can also write the following to add a radio button the same way:
<template>
<div id="app">
<b-input-group>
<b-input-group-prepend is-text>
<input type="radio">
</b-input-group-prepend>
<b-form-input></b-form-input>
</b-input-group>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Custom Radio Button, Checkbox or Switch
The examples above added native radio buttons and checkboxes.
We can also add Bootstrap style radio button, checkbox or switch components.
For example, we can write:
<template>
<div id="app">
<b-input-group>
<b-input-group-prepend is-text>
<b-form-checkbox></b-form-checkbox>
</b-input-group-prepend>
<b-form-input></b-form-input>
</b-input-group>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
to add a b-form-checkbox inside the b-input-group-prepend component.
Other components can be added the same way.
Conclusion
We can add lazy loading images with the b-img-lazy component.
Also, we can add input groups to add components on the left and right of input boxes.
